<template>
    <div class="e-table">
        <el-row class="row">
            <el-col class="wrapper" :span="14">
                <div class="wrapper-top">
                    <div class="title blue-border">数据</div>
                    <div  class="search">
                        <el-input
                            placeholder="输入项目编号"
                            size="small"
                            style="width:200px"
                            v-model="key"
                            @keydown.enter.native="fuzzySearchEnter"
                            @blur="likeSearch"
                        >
                            <img src="@/assets/search.png" slot="suffix" class="el-icon-search" @click="likeSearch">
                        </el-input>
                    </div>
                </div>
                <div class="">
                    <el-table
                        ref="initTable"
                        border
                        :data="tableData"
                        :row-style="rowClass"
                        @row-dblclick="checkRow"
                        @select="changeRow"
                        v-loading="loading"
                        @select-all="changeRow"
                        class="table"
                    >
                        <el-table-column v-for="(item,index) in chooseFeild" align="center" :label="item.label"  :prop="item.prop" show-overflow-tooltip :key="index"></el-table-column>
                    </el-table>

                </div>
            </el-col>
            <el-col class="wrapper" :span="10">
                <div class="wrapper-top">
                    <div class="title blue-border">已选择</div>
                    <div class="color-gray">
                        {{ tableData1.length }}条数据
                    </div>
                </div>
                 <el-table
                    border
                    :data="tableData1"
                    @row-dblclick="cancelRow"
                    class="table"
                 >
                        <el-table-column v-for="(item,index) in chooseFeild" align="center" :label="item.label"  :prop="item.prop" show-overflow-tooltip :key="index"></el-table-column>
                    </el-table>
            </el-col>
        </el-row>
        <el-row class="row" style="min-height: 0px;">
            <el-col :span="14">
                    <ComPagination
                        :total="pagination.total"
                        :pageSize.sync="pagination.limit"
                        :currentPage.sync="pagination.page"
                        @currentChange="currentChange"
                        @sizeChange="sizeChange"
                    />
            </el-col>
        </el-row>
    </div>
</template>

<script>
import ComPagination from '@/components/pagination/pagination.vue'
import { mapState } from 'vuex'
export default {
    props: {
        multiple: {  //是否支持多选，true为多选false为单选
            type: Boolean,
            default: true,
        },
        pagination: {
            type: Object,
            default: ()=>{
                return {
                    'limit': 10,
                    'page': 1,
                    'total': 20,
                    'key': '',
                }
            },
        },
        tableData: {
            type: Array,
            default: ()=>{
                return []
            }
        },
        chooseFeild: { //待选字段
            type: Array,
            default: ()=>{
                return []
            }
        },
        id: { //每行唯一id
            type: String,
            default: 'billId'
        },
        select: {
            type: Array,
            default: ()=>{
                return []
            }
        }
    },
    data () {
        return {
            loading: false,
            tableData1: [], //右边table选择的数据
            key: ''
        }
    },
    watch: {
        tableData: {
            handler () {
                this.$nextTick(()=>{
                    this.selected()
                    let initTable =  this.$refs.initTable
                    initTable.clearSelection()
                    this.tableData1.forEach(item=>{
                        this.tableData.forEach(row=>{
                            if(row[this.id] === item[this.id]) {
                                initTable.toggleRowSelection(row, true)
                            }
                        })
                    })
                })
            },
            immediate: true,
            deep: true
        },
        tableData1: {
            handler (newName) {
                this.$emit('confirm', newName)
            },
            immediate: true,
            deep: true
        }
    },
    components: {
        ComPagination
    },
    computed: {
        ...mapState({
            userInfo: state => state.userInfo,
        }),
    },
    mounted () {
    },

    methods: {
        getList () {
            this.$$emit('getList', this.pagination)
        },
        currentChange (page) {
            this.pagination.page = page
            this.getList()
        },
        sizeChange (size) {
            this.pagination.size = size
            this.getList()
        },
        //左边表格双击选中
        checkRow (row) {
            if(this.multiple) {
                JSON.stringify(this.tableData1).includes(JSON.stringify(row)) ? '' : this.tableData1.push(row)
                this.tableData1.forEach(item=>{
                    this.$refs.initTable.toggleRowSelection(item, true)
                })
            }
            else{
                this.tableData1 = [ row]
            }
        },
        //对所选行进行高亮显示
        rowClass ({ row }) {
            let stylejson = {}
            this.tableData1.forEach(item=>{
                if(item[this.id] === row[this.id]) { //暂时用equipmentId字段进行标识，根据实际返回字段换成其他的
                    stylejson.backgroundColor = '#ecf5ff'
                }
            })
            return stylejson
        },
        //左边表格选框选中
        changeRow (selection) {
            if(this.multiple) {
                selection.forEach(item=>{
                    let arr = this.tableData1.find(x=>x[this.id] === item[this.id]) //判断在右边表格里是否有左边已选择的数据
                    if(!arr) {
                        this.tableData1.push(item)  //没有则添加进去
                    }
                })
                //下面是判断左边表格取消操作，常规的赋值会让翻页后数据出现问题，无法保留其他页面的选择
                this.tableData.forEach(item=>{
                    let obj = selection.find(x=>x[this.id] === item[this.id]) //查找到取消的那一条
                    if(!obj) {
                        let index =  this.tableData1.findIndex(x=>x[this.id] === item[this.id]) //看取消的那一条是否在右边表格里
                        if(index !== -1) {
                            this.tableData1.splice(index, 1) //在的话就删除右边表格的这一条
                        }
                    }

                })
            }
        },
        selected () {
            this.select.forEach(item=>{
                if(this.tableData) {
                    let obj = this.tableData.find(x=>x[this.id] === item)
                    if(obj) {
                        if(!this.tableData1.find(x=>x[this.id] === obj[this.id])) {
                            this.tableData1.push(obj)
                        }
                    }
                }
            })
        },
        //取消选择
        cancelRow (row) {
            this.tableData1.forEach((item, index)=>{
                if(row[this.id] === item[this.id]) {
                    this.tableData1.splice(index, 1)
                    this.$refs.initTable.toggleRowSelection(item, false)
                }else{
                    this.$refs.initTable.toggleRowSelection(item, true)
                }
            })
        },
        //回车键查询
        fuzzySearchEnter (e) {
            if(e.keyCode == 13) {
                this.likeSearch()
            }
        },
        //模糊查询
        likeSearch () {
            this.pagination.key = this.key
            this.$emit('search', this.pagination)
        },
    },

}
</script>

<style lang="scss" scoped>
    .e-table {
        background-color: #fff;
        .header-title{
            font-size: 18px;
            margin-bottom: 30px;
            color: #585252;
        }
        .bottom {
            margin-top: 20px;
            text-align: right;
        }
        .row{
            display:flex;
            .wrapper{
                padding: 10px;
                .wrapper-top{
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    height: 50px;
                    .search{
                        .el-icon-search {
                            cursor: pointer;
                            width: 15px;
                        }
                    }
                }

            }
        }
    }
    .blue-border{
        display: flex;
        align-items: center;
        &::before{
            content: '';
            display: block;
            width: 8px;
            height: 20px;
            background: #2e61d7;
            border-radius: 15px;
            margin-right: 10px;
        }
    }

</style>